<template>
  <!-- router表示是否启用vue-router模式，启用该模式会在激活导航时以index作为path进行路由跳转-->
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    :default-active="this.$route.path"
    text-color="#fff"
    :collapse="expand"
    style="height: 100vh; width: 200px"
    :router="true"
  >
    <!-- el-sub-menu表示下面有子菜单，不是一级菜单-->
    <el-sub-menu index="index">
      <template #title>
        <el-icon><Tools /></el-icon>
        <span>博客管理</span>
      </template>
      <!-- el-menu-item表示没有子菜单，单个的标签-->
      <!-- 这里应该只能用绝对路径，如果使用相对路径会拼接在之前路径上一级的后面-->
      <!-- 如果来回切换标签会发生错误-->
      <el-menu-item index="/index/article/all">所有博客</el-menu-item>
      <el-menu-item index="/index/article/myArticle">我的博客</el-menu-item>
      <el-menu-item index="/index/article/deleted">回收站</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><User /></el-icon>
        <span>个人中心</span>
      </template>
      <el-menu-item index="/index/user/like">我点赞的</el-menu-item>
      <el-menu-item index="/index/user/collect">我收藏的</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><BellFilled /></el-icon>
        <span>评论相关</span>
      </template>
      <el-menu-item index="/index/comment/myComment">我的评论</el-menu-item>
      <el-menu-item index="/index/comment/response">回复我的</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { useMenuStore } from "@/stores/menu.js";
import { storeToRefs } from "pinia";

const menuStore = useMenuStore();
let { expand } = storeToRefs(menuStore);
</script>

<style lang="scss" scoped></style>
